<template>
    <div>
      <el-dialog
        center
        :title="isAdd ? '添加角色' : '编辑角色'"
        :visible.sync="isShow"
        :before-close="cancel"
      >
        <el-form ref="roleRef" :model="roleInfo" :rules="rules">
          <el-form-item
            label="角色名称"
            :label-width="formLabelWidth"
            prop="rolename"
          >
            <el-input v-model="roleInfo.rolename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色权限" :label-width="formLabelWidth">
            <el-tree
            ref="tree"
              :data="$store.getters['menu/getMenu']"
              show-checkbox
              node-key="id"
              default-expand-all
              :props="{
                children: 'children',
                label: 'title',
              }"
              check-strictly
            >
            </el-tree>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch
              v-model="roleInfo.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button @click="confirm" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { addRole, getRoleInfo, editRole } from "../../request/api";
  export default {
    props: ["isShow", "isAdd"],
    data() {
      return {
        formLabelWidth: "120px",
        roleInfo: {
          rolename: "", //角色名称string
          menus: "", //角色权限 id数组'2,3,4' 字符串
          status: 1, //状态1正常2禁用number
        },
        rules: {
          rolename: [
            { required: true, message: "请输入角色名称", trigger: "blur" },
            {
              min: 2,
              max: 10,
              message: "长度在 2 到 10 个字符",
              trigger: "blur",
            },
          ],
        },
      };
    },
    mounted() {
      //组件一加载 就触发菜单行动的调用
      //如果用户没有去点击菜单再发起对服务器的请求
      //目的是减少对服务端发起请求
      if (this.$store.getters["menu/getMenu"].length == 0) {
        this.$store.dispatch("menu/getMenuAction");
      }
    },
    methods: {
      //封装一个查询一条数据的事件
      async lookup(id) {
        // console.log(id,'被老父亲触发')
        let res = await getRoleInfo({ id });
        this.roleInfo = res.list;
        this.roleInfo.id = id;
        console.log(res,'获取一条数据')
        this.$refs.tree.setCheckedKeys(this.roleInfo.menus.split(','))
      },
      //封装一个取消事件
      cancel() {
        this.$emit("cancel", false);
        //清空表单以及规则验证内容
        this.roleInfo = {
          rolename: "", //角色名称string
          menus: "", //角色权限 id数组'2,3,4' 字符串
          status: 1, //状态1正常2禁用number
        };
        this.$refs.roleRef.resetFields();
        //当关闭弹框 要清空 tree结构的内容
        this.$refs.tree.setCheckedKeys([])
      },
      //封装一个确认事件
      confirm() {
        this.$refs.roleRef.validate((val) => {
          if (val) {
              // console.log(this.roleInfo, "表单对象");
              // console.log(this.$refs.tree.getCheckedKeys().join(),'获取tree值')
              this.roleInfo.menus = this.$refs.tree.getCheckedKeys().join()
              // return
            if (this.isAdd) {
              addRole(this.roleInfo).then((res) => {
                if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.cancel();
                  //重新触发行动
                  this.$store.dispatch("role/getRoleAction");
                } else {
                  this.$message.error(res.msg);
                }
              });
            } else {
              editRole(this.roleInfo).then((res) => {
                if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.cancel();
                  //重新触发行动
                  this.$store.dispatch("role/getRoleAction");
                } else {
                  this.$message.error(res.msg);
                }
              });
            }
          }
        });
      },
    },
  };
  </script>
  
  <style scoped></style>
  